<template>
  <div class="box">
    <van-sticky>
      <div class="navbar">
        <van-icon name="cross" class="navcross" @click="closeCity" />
        <span class="nav-title">当前城市-{{ $store.state.cityName }}</span>
      </div>

      <van-search v-model="iptVal" show-action placeholder="输入城市名或拼音" @search="onSearch" @input="onInput" >
        <template #action>
          <div @click="onCancel">取消</div>
        </template>
      </van-search>
    </van-sticky>

    <CityList v-if="blockShow == 1" :cityList="cityList" />

    <SearchList v-else-if="blockShow == 2" :searchlist="searchlist" />

    <div class="nolist" v-if="blockShow==3">
      <img src="../assets/city.png" alt="">
      <p>没有找到匹配的城市</p>
    </div>

  </div>
</template>

<script>
import http from '../request/http'
import CityList from './city/CityList.vue'
import SearchList from './city/SearchList.vue'
export default {
  name: 'City',
  data() {
    return {
      iptVal: '',
      // 区块显示(1代表citylist，2代表searchlist,3代表啥也没搜到)
      blockShow: 1,
      // 城市列表
      cityList: [],
      // 原始城市列表数据
      originalcity: [],
      arr: []
    }
  },
  components: {
    CityList,
    SearchList
  },
  computed: {
    // 模糊查询
    searchlist() {
      const arr = this.originalcity.filter((p) => {
        // return p.name.indexOf(this.iptVal) !== -1
        return p.name.includes(this.iptVal) || p.pinyin.includes(this.iptVal)
      })
      this.arr = arr
      if (arr.length == 0) {
        this.blockShow = 3
        return []
      }
      return arr
    }
  },
  methods: {
    onCancel() {
      this.blockShow = 1
    },
    // 城市名字处理函数
    handleCityData(cities) {
      // 输入原始数据,输出目标数据
      const letterArr = []
      const newCities = []
      for (let code = 65; code < 91; code++) {
        letterArr.push(String.fromCharCode(code))
      }
      letterArr.forEach((letter) => {
        const list = cities.filter(item => item.pinyin.substring(0, 1).toUpperCase() === letter)

        if (list.length > 0) {
          newCities.push({
            type: letter,
            list: list
          })
        }
      })
      return newCities
    },
    // 实时搜索
    onInput() {
      this.blockShow = 2
    },
    // 按下回车搜素
    onSearch() {
      if (this.arr.length == 0) {
        this.blockShow = 3
      }
    },
    closeCity() {
      this.$router.back()
    }
  },
  mounted() {
    http({
      url: '/gateway?k=6838258',
      headers: {
        'X-Host': 'mall.film-ticket.city.list'
      }
    }).then(res => {
      this.cityList = this.handleCityData(res.data.cities)
      this.originalcity = res.data.cities
    })
  }
}
</script>

<style scoped>
.box {
  background: #fff;
  /* background: #f4f4f4; */
}
.navbar {
  position: relative;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  height: .45rem;
  line-height: .45rem;
}
.navcross {
  position: absolute;
  padding-left: .2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .2rem;
}
.nav-title {
  display: block;
  font-size: .18rem;
  text-align: center;
}










.nolist {
  margin: 1.07rem auto;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  background: #fff;
}
.nolist img {
  width: .90rem;
  margin: auto;
  display: block;
  box-sizing: border-box;
}
.nolist p {
  color: #bdc0c5;
  padding: .02rem .50rem;
  line-height: .20rem;
  font-size: .14rem;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
}
</style>
<style>
.van-index-anchor {
  background-color: #f4f4f4 !important;
}  
</style>